<template>
  <view :class="theme">
    <view v-if="options.list.length > 1" class="tabs pt-30 pb-30 fixed bg-base flex-1 items-center">
      <uv-subsection @change="switchTab" :list="options.list" key-name="name"
        :customStyle="{ width: '420rpx', height: `72rpx` }" :current="options.current" font-size="28"
        :active-color="$config.COLOR_PRIMARY" :inactive-color="$config.COLOR_WHITE" :bgColor="$config.COLOR_SECTION"
        mode="button" />
    </view>

    <view class="bg-section b-rounded-16" style="margin: 132rpx 20rpx 20rpx;">
      <view v-for="(item, index) in options.list[options.current].list" :key="item.log_sn || index"
        :style="{ borderTop: index ? `2rpx solid #131313` : `none` }"
        class="flex-row items-center ml-30 mr-30 pt-20 pb-20">
        <view class="flex-1">
          <text class="ellipsis text-28">{{ item.type || "-" }}</text>
          <text class="mt-12 text-20 color-placeholder">{{ item.create_at || "-" }}</text>
        </view>
        <text :class="`color-${{ 1: 'success', 2: 'error' }[item.state as '1' || '2'] || 'warning'} text-28 fw-700`">
          {{ { 1: "+", 2: "-" }[(item.state as 1 | 2)] || "" }}{{ Math.abs(Number(item.coin || 0)) || "0.00" }}
        </text>
      </view>
      <view class="mt-30 mb-30 items-center">
        <uv-image v-if="!options.list[options.current].list.length" :showLoading="false" width="400" height="400"
          class="mt-60 mb-30" src="/static/img/blank.png" mode="aspectFit" />
        <uv-load-more :status="options.list[options.current].cache.status"
          :is-dot="!!options.list[options.current].list.length" />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import { pager } from "@/common/libs/utils";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { reactive } from "vue";

const { theme } = useMapState(["theme"]);
const { $config = {} } = getApp().globalData || {};

const options = reactive({
  current: 0,
  list: [
    {
      name: "转入",
      status: 1,
      page: 0,
      limit: 20,
      list: [] as any[],
      cache: {
        page: 1,
        list: [] as any[],
        status: "nomore",
      },
      next: false,
    },
    {
      name: "转出",
      status: 2,
      page: 0,
      limit: 20,
      list: [] as any[],
      cache: {
        page: 1,
        list: [] as any[],
        status: "nomore",
      },
      next: false,
    },
  ],
});

const switchTab = (index: number) => {
  if (index === options.current) return;
  options.current = index;
  const option = options.list[options.current];
  option.page = 0;
  option.cache = {
    page: 1,
    list: [] as any[],
    status: "nomore",
  };
  uni.pageScrollTo({ scrollTop: 0, duration: 0 });
  getData();
};

const billTypes = {
  "1": {
    api: "/goodsGiveLog",
    title: "卡片转赠",
  },
};

let billKey = Object.keys(billTypes)[0] as keyof typeof billTypes;
onLoad(({ type }: any) => {
  type && (billKey = type);
  getData();
  uni.setNavigationBarTitle({ title: `${billTypes[billKey].title}记录` });
});

const getData = () => {
  pager(
    {
      url: billTypes[billKey].api,
      data: { status: options.list[options.current].status },
    },
    options.list[options.current]
  );
};

onReachBottom(() => getData());
</script>

<style lang="scss" scoped>
// scss
.tabs {
  left: var(--window-left);
  right: var(--window-right);
  top: var(--window-top);
}
</style>